<template>
  <el-dialog :modal-append-to-body="false" @close="xmqxCancel('xmqxRuleForm')" :close-on-click-modal="false"
    title="项目取消" :visible.sync="xmqxVisible" width="500px">
    <div class="scroll-view">
      <el-form :model="xmqxRuleForm" :rules="xmqxRules" ref="xmqxRuleForm" label-position="top">
        <el-form-item label="取消类型" prop="cancel_type">
          <el-select filterable class="input-box" v-model="xmqxRuleForm.cancel_type" placeholder="请选择" clearable>
            <el-option v-for="item in cancelTypelist" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="取消原因" prop="remark">
          <el-input class="input-box" :rows="4" type="textarea" v-model="xmqxRuleForm.remark"></el-input>
        </el-form-item>
        <el-form-item label="取消附件 (.zip,.ppt,.ppsx,.pptx,.psd)" prop="cancel_file">

          <div class="file-list-box">
            <div class="file-item-box" v-for="(item, index) in xmqxRuleForm.cancel_file" :key="index">
              <div class="el-icon-delete-box" @click="xmqxFileRemove(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>

            <el-upload accept=".zip,.ppt,.ppsx,.pptx,.psd" class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="(file, fileList) => {
                xmqxChangeFile(file, fileList, 'cancel_file');
              }">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="xmqxCancel('xmqxRuleForm')">关闭</el-button>
      <el-button type="primary" @click="xmqxSubmit('xmqxRuleForm')" :disabled="diaLoading" :loading="diaLoading">确
        定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import projectApi from "@/api/projectApi";
import companyApi from "@/api/companyApi";
import adminApi from "@/api/adminApi";
import { getUserInfo } from "@/utils/auth";
import foremanApi from "@/api/foremanApi";

export default {
  name: "",
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
      required: false,
    },
    project_id: {
      required: false,
    },
  },
  data() {
    return {
      diaLoading: false,
      xmqxVisible: false,
      xmqxRuleForm: {
        cancel_type: "",
        remark: "",
        cancel_file: [],
      },
      xmqxRules: {
        cancel_type: [
          { required: true, message: "请选择取消类型", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请输入取消原因", trigger: "change" },
        ],
      },
      cancelTypelist: [
        {
          label: "价格原因",
          value: 1,
        },
        {
          label: "工期原因",
          value: 2,
        },
        {
          label: "客户拒绝沟通",
          value: 3,
        },
        {
          label: "客户自行施工",
          value: 4,
        },
        {
          label: "不可抗力因素",
          value: 5,
        },
        {
          label: "前施工问题影响",
          value: 6,
        },
        {
          label: "客户关联",
          value: 7,
        },
        {
          label: "其他原因",
          value: 8,
        },
      ], //取消类型列表
    };
  },
  watch: {
    addDialogVisible(val1, val2) {
      this.xmqxVisible = this.addDialogVisible;
    },
  },
  computed: {},
  mounted() { },
  methods: {
    // 项目取消
    xmqxCancel(formName) {
      this.xmqxRuleForm = {
        cancel_type: "",
        remark: "",
        cancel_file: [],
      };
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
        this.$emit("onClose", true);
      });
    },
    xmqxSubmit(formName) {
      let xmqxRuleForm = this.xmqxRuleForm;
      console.log(xmqxRuleForm, "取消项目参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          let formdata = new FormData();
          formdata.append(
            "data",
            JSON.stringify({
              cancel_type: xmqxRuleForm.cancel_type,
              remark: xmqxRuleForm.remark,
              project_id: this.project_id,
            })
          );
          xmqxRuleForm.cancel_file.forEach((item) => {
            formdata.append("cancel_file[]", item.raw);
          });
          projectApi
            .projectCancellation(formdata)
            .then((res) => {
              console.log(res, "取消项目");
              this.diaLoading = false;
              if (res.code == 200) {
                this.$emit("onSuccess", true);
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    xmqxChangeFile(file, list, type) {
      let xmqxRuleForm = this.xmqxRuleForm;
      xmqxRuleForm.cancel_file = [file];
      this.xmqxRuleForm = xmqxRuleForm;
    },
    xmqxFileRemove(index) {
      let xmqxRuleForm = this.xmqxRuleForm;
      xmqxRuleForm.cancel_file.splice(index, 1);
      this.xmqxRuleForm = xmqxRuleForm;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>